<template>
  <div class="category_list">
    <scroll ref='scrollview' class="scroll">
      <div
        class="category_item"
        @click="toggleClick(index)"
        :class="{ active: currentIndex === index }"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item.title }}
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll";
export default {
  components: {
    Scroll,
  },
  name: "CategoryList",
  props: {
    categoryList: {
      type: Array,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      list: null,
      currentIndex: 0,
    };
  },
  created() {},
  methods: {
    toggleClick(index) {
      this.currentIndex = index;
    },
  },
  mounted() {
    console.log(this.categoryList);
    // setTimeout(()=>{
    this.list = [...this.categoryList,...this.categoryList];
    // },2000)
    setTimeout(()=>{
      this.$refs.scrollview.scrollRefresh()
    },50)
  },
  destroyed() {
    console.log("destroyed");
  },
};
</script>

<style scoped>
.category_list {
  height: 100%;
}
.scroll {
  height: 100%;
  overflow: hidden;
}
.category_item {
  padding: 10px 10px;
  background-color: #f5f5f5;
}
.active {
  border-left: 3px solid var(--color-high-text);
  background-color: #fff;
}
</style>